<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML-结构层</li>
        <li>CSS-样式层</li>
        <li>JavaScript-行为交互层</li>
    </ul>

    <ol type="i">
        <li>HTML-结构层</li>
        <li>CSS-样式层</li>
        <li>JavaScript-行为交互层</li>
    </ol>

    <!-- 绝对路径 -->
    <img
        src="https://img.alicdn.colEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png"
        alt="淘宝图片"
    />
    <!-- 相对路径 -->
    <img src="./images/a.png" alt="" title="abc" />

    <!-- 当图片和html文件处于同一文件夹下的时候(并列的关系) -->
    <!-- ./表示当前所在文件夹 -->
    <img src="b.png" alt="">
    <img src="./b.png" alt="">

    <!-- 当图片所在的文件夹和html文件并列的时候，需要通过路径进入 -->
    <img src="images/d.png" alt="">
    <img src="./images/d.png" alt="">

    <!-- 当html所在的文件夹和图片并列的时候，要通过../返回上一级文件夹 -->
    <img src="../c.png" alt="">
    <img src="../../c.png" alt="">

</body>
</html>

<!-- 
    列表标签
        无序列表标签
            <ul>
                <li>xxx</li>
                <li>yyy</li>
            </ul>

        有序列表
            <ol>
                <li>xxx</li>
                <li>yyy</li>
            </ol>

    图片标签
        img 单标签
            src属性: 表示的是图片的地址 可以放在线的地址，也可以放本地的地址
            alt属性: 表示提示文字。当图片因为路径或者网络或者图片损坏等原因不能正常显示的时候的提示文字
                    帮助无障碍阅读
            title属性: 表示图片的标题，当鼠标移入时显示
                    不仅是图片可以用，任意标签都可以用title
            
 -->